<template>
  <div :class="layoutCls">
    <div class="header-container">
      <div class="header-top">
        <div class="header-top-container" :style="{
        width: settingStore.publicWidth,
      }">
          <div class="header-logo-container-left">{{ initDate() }}</div>
          <div class="header-logo-container-right">
            <div class="header-logo-container-right-sc"><img src="@/assets/shoucang.png" alt=""><span>收藏网页</span></div>
            <div class="header-logo-container-right-wx" @click="handleWx()"><img src="@/assets/weixin.png" alt=""><span>官方微信</span></div>
          </div>
        </div>
      </div>
      <div class="header-logo">
          <span v-if="showLogo" :style="{
        width: settingStore.publicWidth,
      }" class="header-logo-container" @click="handleNav('/dashboard/base')">
            <!-- <logo-full class="t-logo" /> -->
            <!-- <img src="@/assets/nav-logo1.png" alt=""></img> -->
            <!-- <span>校苑视界创新教育中心</span> -->
              <img src="@/assets/new_logo.png" alt=""></img>
              <span class="header-logo-container-right-title">校苑视界创新教育中心</span>
          </span>
          <div v-else class="header-operate-left">
            <t-button theme="default" shape="square" variant="text" @click="changeCollapsed">
              <t-icon class="collapsed-icon" name="view-list" />
            </t-button>
            <!-- <search :layout="layout" /> -->
          </div>
      </div>
      <t-head-menu :class="menuCls" :theme="menuTheme" expand-type="popup" :value="active" @change="handleChangeMenu" :style="{
        width: settingStore.publicWidth,
      }">
        <template v-if="layout !== 'side'" #default>
          <menu-content class="header-menu" :nav-data="menu" />
        </template>
        <template #operations>
          <div class="operations-container">
            <!-- 搜索框 -->
            <!-- <search v-if="layout !== 'side'" :layout="layout" /> -->
            <t-dropdown :min-column-width="120" trigger="click">
              <template #dropdown>
                <t-dropdown-menu v-if="userStore.$state.token!=null &&userStore.$state.token!=''">
                  <t-dropdown-item class="operations-dropdown-container-item" @click="handleNav('/user')">
                    <t-icon name="user-circle"></t-icon>个人中心
                  </t-dropdown-item>
                  <t-dropdown-item class="operations-dropdown-container-item" @click="handleLogout">
                    <t-icon name="poweroff"></t-icon>退出登录
                  </t-dropdown-item>
                </t-dropdown-menu>
                <t-dropdown-item v-else class="operations-dropdown-container-item" @click="handleNav('/login')">
                  <t-icon name="user-circle"></t-icon>登陆(证书下载)
                </t-dropdown-item>
              </template>
              <t-button class="header-user-btn" theme="default" variant="text">
                <template #icon>
                  <t-icon class="header-user-avatar" name="user-circle" />
                </template>
                <!-- <div class="header-user-account">{{ realName }}</div> -->
                <template #suffix><t-icon name="chevron-down" /></template>
              </t-button>
            </t-dropdown>
            <!-- <t-tooltip placement="bottom" content="系统设置">
            <t-button theme="default" shape="square" variant="text" @click="toggleSettingPanel">
              <t-icon name="setting" />
            </t-button>
          </t-tooltip> -->
          </div>
        </template>
      </t-head-menu>
    </div>
    <div class="mobile-menu">
      <t-button class="header-menu-mobile-btn" theme="default" shape="square" variant="text" @click="toggleMobileMenu">
        <t-icon name="menu-fold" />
      </t-button>
      <t-drawer v-model:visible="mobileMenuVisible" placement="right" :close-on-overlay-click="true" :width="280"
        :confirmBtn="null" cancelBtn="关闭" class="mobile-menu-drawer">
        <template #header>
          <div class="mobile-menu-header"  @click="handleNav('/dashboard/base')">
            <!-- <img src="@/assets/nav-logo.png" class="mobile-logo" alt=""></img> -->
            <img src="@/assets/nav-logo1.png" alt=""></img>
            <span>校苑视界创新教育中心</span>
          </div>
        </template>
        <div class="mobile-menu-content">
          <t-menu :value="active" :theme="theme" :collapsed="false" @change="handleChangeMenu">
            <template v-for="(menu, index) in menu" :key="index">
              <t-menu-item v-if="!menu.children?.length" :value="menu.path">
                {{ menu.meta?.title }}
              </t-menu-item>
              <t-submenu v-else :value="menu.path" :title="menu.meta?.title">
                <t-menu-item v-for="(child, childIndex) in menu.children" :key="childIndex" :value="child.path">
                  {{ child.meta?.title }}
                </t-menu-item>
              </t-submenu>
            </template>
                <t-menu-item value="/user">
                  个人中心
                </t-menu-item>
          </t-menu>
        </div>
      </t-drawer>
    </div>
     <t-dialog v-model:visible="visible" top="30vh" :footer="false" @close="handleClose">
        <div class="dialog_wx"><img :src="site_wechat" alt="" /></div>
    </t-dialog>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from "vue";
import { computed, ref, watch,onMounted } from "vue";
import { useRouter,useRoute } from "vue-router";

import { prefix,TOKEN_NAME } from "@/config/global";
// import { getActive } from "@/router";
import { useSettingStore, useUserStore } from "@/store";
import type { MenuRoute } from "@/types/interface";
import MenuContent from "./MenuContent.vue";
import dayjs from "dayjs";
import { configKey } from "@/api";
// import Search from "./Search.vue";
const  token  = ref(localStorage.getItem(TOKEN_NAME));
const site_wechat = ref('');
configKey("site_wechat").then(e=> {
  site_wechat.value = e.image;
})
const props = defineProps({
  theme: {
    type: String as PropType<'light' | 'dark'>,
    default: 'light',
  },
  layout: {
    type: String,
    default: "top",
  },
  showLogo: {
    type: Boolean,
    default: true,
  },
  menu: {
    type: Array as PropType<MenuRoute[]>,
    default: () => [],
  },
  isFixed: {
    type: Boolean,
    default: false,
  },
  isCompact: {
    type: Boolean,
    default: false,
  },
  maxLevel: {
    type: Number,
    default: 3,
  },
});

const visible = ref(false);
const mobileMenuVisible = ref(false);

const router = useRouter();
const route = useRoute();
const settingStore = useSettingStore();
const userStore = useUserStore();

/* const toggleSettingPanel = () => {
  settingStore.updateConfig({
    showSettingPanel: true,
  });
};
 */
// const active = computed(() => getActive());
const active = ref('')

const layoutCls = computed(() => [`${prefix}-header-layout`]);

const menuCls = computed(() => {
  const { isFixed, layout, isCompact } = props;
  return [
    {
      [`${prefix}-header-menu`]: !isFixed,
      [`${prefix}-header-menu-fixed`]: isFixed,
      [`${prefix}-header-menu-fixed-side`]: layout === "side" && isFixed,
      [`${prefix}-header-menu-fixed-side-compact`]:
        layout === "side" && isFixed && isCompact,
    },
  ];
});
const menuTheme = computed(() => props.theme as "light" | "dark");
const changeCollapsed = () => {
  settingStore.updateConfig({
    isSidebarCompact: !settingStore.isSidebarCompact,
  });
};

// const realName = ref(userStore.userInfo.realName);
onMounted(() => {
  initActive();
})
const initDate = () => {
const now = dayjs();
const formattedDate = now.format('YYYY-MM-DD HH:mm:ss');
const weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.day()];
const fullDateTime = `${formattedDate} ${weekday}`;
return fullDateTime;
};
const handleNav = (url) => {
  router.push(url);
};
// 退出登录
const handleLogout = () => {
  userStore.$state.token=null;
  // 清空token
  userStore.logout();
  // 刷新页面，使动态路由还原至初始状态
};
const toggleMobileMenu = () => {
  mobileMenuVisible.value = !mobileMenuVisible.value;
};
const handleChangeMenu = (path) => {
  active.value  = path;
  router.push(path);
  mobileMenuVisible.value = false;
};
const initActive = () => {
    const val = route.path
    if (val === '/dashboard/base' || val === '/introduce' || val === '/news' || val === '/signUp' || val === '/certificateQuery' || val === '/contactUs') {
      active.value = val;
    }else if(val === '/signUpSubmit'){
      active.value = '/signUp';
    }else if(val === '/newsDetail'){
      active.value = '/news';
    }
};
const handleWx = () => {
  visible.value = true
};
const handleClose = () => {
  visible.value = false
};
watch(
  () => route.path,
  (val) => {
    initActive()
  },
  { deep: true },
);

</script>
<style lang="less" scoped>
@font-face {
    font-family: 'MyCustomFont';
    src: url('@/assets/font/方正正中黑简体.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}
:deep(.t-button--variant-text:hover) {
  background-color: #0084ff;
  border: #1890ff;
}

.header-container {
  width: 100%;
  background: #FFFFFF;
  position: fixed;
  top: 0;
  z-index: 1001;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 11px 0px rgba(50,50,50,0.2);
  .@{starter-prefix}-header {
    &-menu-fixed {

      :deep(.t-head-menu__inner) {
        padding-right: var(--td-comp-margin-xl);
        // background-color: #1890ff;
        border: 0;
      }

      &-side {
        left: 232px;
        right: 0;
        z-index: 10;
        width: auto;
        transition: all 0.3s;

        &-compact {
          left: 64px;
        }
      }
    }

    &-logo-container {
      cursor: pointer;
      display: inline-flex;
    }
  }
  .header-top{
    width: 100%;
    height: 40px;
    background: #0C23A5;
    .header-top-container{
      height: 40px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: Microsoft YaHei;
      font-weight: 600;
      font-size: 14px;
      color: #fff;
      line-height: 36px;
      .header-logo-container-right{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        >div{
          margin-left: 50px;
          font-family: Microsoft YaHei;
          font-weight: 600;
          font-size: 14px;
          color: #fff;
          display: flex;
          align-items: center;
          cursor: pointer;
        }
        .header-logo-container-right-sc{
          img{
            width: 16px;
            height: 14px;
            margin-right: 10px;
          }
        }
        .header-logo-container-right-wx{
          img{
            width: 18px;
            height: 14px;
            margin-right: 10px;
          }
        }
      }
    }
  }
}

.header-menu {
  flex: 1 1 1;
  display: inline-flex;

  :deep(.t-menu__item) {
    min-width: unset;
  }
  :deep(.t-menu__item.t-is-active) {
    background-color: transparent;
    color: #AD2121;
  }

}

.operations-container {
  display: flex;
  align-items: center;

  .t-popup__reference {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .t-button {
    margin-left: var(--td-comp-margin-l);
  }
}

.header-operate-left {
  display: flex;
  align-items: normal;
  line-height: 0;
  padding-left: var(--td-comp-margin-xl);
}
.header-logo{
  width: 100%;
  height: 90px;
  border-bottom: 1px solid #D2D2D2;
  display: flex;
  align-items: center;
  justify-content: center;
.header-logo-container {
  height: 100%;
  display: flex;
  color: var(--td-text-color-primary);
  margin-left: 0;
  display: flex;
  align-items: center;
  .t-logo {
    width: 100%;
    height: 100%;

    &:hover {
      cursor: pointer;
    }
  }
  span{
    font-size: 34px;
    margin-left: 10px;
    font-family: 'MyCustomFont';
    color: #000;
    // font-weight: bold;
  }
  &:hover {
    cursor: pointer;
  }
  img{
    width: 28px;
    // height: 26px;
    height: 50px;
  }
}
}

.header-user-account {
  display: inline-flex;
  align-items: center;
  color: #fff;
  // color: var(--td-text-color-primary);
}

:deep(.t-head-menu__inner) {
  border-bottom: 1px solid var(--td-component-stroke);
}

.t-menu--light {
  .header-user-account {
    // color: var(--td-text-color-primary);
    color: #fff;
  }
}

.t-menu--dark {
  .t-head-menu__inner {
    border-bottom: 1px solid var(--td-gray-color-10);
  }

  .header-user-account {
    // color: rgba(255, 255, 255, 0.55);
    color: #fff;
  }
}

.operations-dropdown-container-item {
  width: 100%;
  display: flex;
  align-items: center;

  :deep(.t-dropdown__item-text) {
    display: flex;
    align-items: center;
  }

  .t-icon {
    font-size: var(--td-comp-size-xxxs);
    margin-right: var(--td-comp-margin-s);
  }

  :deep(.t-dropdown__item) {
    width: 100%;
    margin-bottom: 0px;
  }

  &:last-child {
    :deep(.t-dropdown__item) {
      margin-bottom: 8px;
    }
  }
}


.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  padding: 16px;
  background-color: rgba(0, 0, 0, .6);
  /* background: var(--td-bg-color-container);
  width: 100%; */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

  .header-menu-mobile-btn {
    color: #fff;

    .t-icon {
      font-size: 24px;
    }
  }

  .mobile-menu-header {
    height: 60px;
    display: flex;
    align-items: center;
    // padding: 16px 0;
    border-bottom: 1px solid var(--td-component-stroke);
      font-size: 16px;
      font-weight: bold;
      font-family: "Arial", sans-serif;

    .mobile-logo {
      width: 100%;
    }
    img{
      height: 100%;
    }
    .mobile-title {
      color: var(--td-text-color-primary);
    }
  }

  .mobile-menu-content {
    padding: 16px 0;
  }
}

@media screen and (max-width: 750px) {
  .header-container {
    display: none;
  }

  .mobile-menu {
    display: block;
  }
}

.dialog_wx{
  // width: 300px;
  margin: 0 auto;
  text-align: center;
  img{
    min-width: 300px;
    min-height: 300px;
  }
}
</style>

<!-- eslint-disable-next-line vue-scoped-css/enforce-style-type -->
<style lang="less">
.operations-dropdown-container-item {
  .t-dropdown__item-text {
    display: flex;
    align-items: center;
  }
}
</style>
